<template>
  <div>
    <div class="topbar">
      <van-button @click="editBtn">·· {{isEditing ? '完成' : '编辑'}}</van-button>
    </div>
    <van-checkbox-group v-model="result" :disabled="isEditing">
      <div class="checkbox">
      <van-checkbox v-for="item in cartList" :key="item.id" @click="changeChecked(item)" :name="item.id">
        <van-card
          :num="item.number"
          :price="Number(item.retail_price).toFixed(2)"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        />
        <!-- 商品删除按钮 -->
        <van-button @click.stop="delGoods(item.product_id)" class="danger" size="mini" v-show="isEditing">删除</van-button>
        <!-- 步进器 -->
        <van-stepper @change="stepperChange(item)" v-show="isEditing" v-model="item.number"></van-stepper>
      </van-checkbox>
      </div>
    </van-checkbox-group>
    <!-- 提交栏 -->
    <van-submit-bar @submit="onSubmit" :price="cartTotal.checkedGoodsAmount*100" button-text="提交订单">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
      <!-- <template #tip>
        <span>
        </span>
      </template> -->
    </van-submit-bar>
  </div>
</template>

<script>
import { getCartListData, changeGoodsChecked, changeGoodsStepper, deleteGoods } from '@/request/api'
export default {
  data () {
    return {
      // 复选框双向绑定数据
      // 哪一个到商品的checked的值为1，就可以把它的id添加到这个数组
      result: [],
      // 购物车列表数据
      cartList: [],
      // 购物车商品总信息
      cartTotal: [],
      // 是否处于编辑状态
      isEditing: false
    }
  },
  computed: {
    allChecked: {
      get() {
        return this.cartList.length === this.result.length
      },
      set(val) {
        // 新建一个商品id数组，把所有id存到该数组
        const idsArr = []
        this.cartList.forEach(item => {
          idsArr.push(item.product_id)
        })
        changeGoodsChecked({
          isChecked: val ? 1 : 0,
          // 后台要求是字符串
          productIds: idsArr.join()
        }).then(res => {
          if (res.errno === 0) {
            this.totalFn(res.data)
          }
        })
      }
    }
  },
  created() {
    getCartListData().then(res => {
      if (res.errno === 0) {
        this.totalFn(res.data)
      }
    })
  },
  methods: {
    // 点击删除按钮触发
    delGoods(pid) {
      deleteGoods({
        productIds: pid.toString()
      }).then(res => {
        if (res.errno === 0) {
          this.totalFn(res.data)
        }
      })
    },
    // 点击步进器触发
    stepperChange(item) {
      changeGoodsStepper({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id
      }).then(res => {
        if (res.errno === 0) {
          this.totalFn(res.data)
        }
      })
    },
    // 点击编辑按钮触发
    editBtn() {
      this.isEditing = !this.isEditing
    },
    totalFn(data) {
      this.cartList = data.cartList
      this.cartTotal = data.cartTotal
      // 清空选中数组
      this.result = []
      this.cartList.map(item => {
        return item.checked === 1 ? this.result.push(item.id) : ''
      })
    },
    onSubmit() {
      this.$toast.fail('功能暂未开放')
    },
    // 点击复选框触发事件
    changeChecked(item) {
      if (this.isEditing) return
      // 请求后端告诉我们改变了哪些值，后端返回一个处理过后的数据
      changeGoodsChecked({
        isChecked: item.checked === 0 ? 1 : 0,
        productIds: item.product_id
      }).then(res => {
        if (res.errno === 0) {
          this.totalFn(res.data)
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.topbar {
  background-color: #fff;
  display: flex;
  justify-content: right;
  padding: .1rem .5rem;
  .van-button {
    border: none;
    font-size: 1rem;
    font-weight: 500;
  }
}
/deep/ .van-checkbox__label {
  flex: 1;
}
.van-checkbox-group {
  background-color: #fff;
    .checkbox {
    background-color: #efefef;
    .van-checkbox {
    padding: .5rem;
    margin: .3rem 0;
    position: relative;
    background-color: #fff;
    .van-card {
      background-color: #fff;
      font-size: 1rem;
    }
    .van-button {
      position: absolute;
      right: 8rem;
      bottom: .6rem;
      border: none;
      color: red;
    }
  }
}
}
.van-submit-bar {
  bottom: 3.2rem;
}
.van-stepper {
  text-align: right;
}
</style>
